<template>
  <!-- 根部必须有一个div：包含所有内容 -->
  <div>
    <Navigation :username="username"></Navigation>

    <div class='register-page'>
      <div class='register-window'>

        <div class='register-state'>
          {{state}}
        </div>

        <div class='register-item'>
          <el-input v-model="input_username" placeholder="请输入昵称"></el-input>
        </div>

        <div class='register-item'>
          <el-input v-model="input_password" placeholder="请输入密码" show-password></el-input>
        </div>

        <div class='register-item'>
          <el-button type="primary" @click="register">注册</el-button>
        </div>

      </div>
    </div>

  </div>
</template>



<style>
  .register-page {
    width: 100vw;
    height: calc(100vh - 56px);
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .register-window {
    width: 500px;
    height: 300px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.658);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .register-item {
    width: 300px;
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
  }

  .register-state {
    width: 300px;
    height: 10px;
    color: #F56C6C;
    font-size: 12px;
    display: flex;
    flex-direction: row;
  }
</style>


<script>
  import Navigation from "../../components/Navigation.vue"
  import api from '../../utils/api.js'

  export default {
    // 名字
    name: 'Register',
    // 数据
    data() {
      return {
        input_username: '',
        input_password: '',
        username: '',
        userid: '',
        state: '',
      }
    },
    // 引入(注册)组件
    components: {
      Navigation
    },
    // 方法
    methods: {
      // 登录方法 方法名：function(参数){方法体}，
      register: function () {
        var username = this.input_username
        var password = this.input_password
        // 请求后台的登录接口
        var path = api.api + "/user/register"
        //form表单
        let formData = new FormData();
        //参数
        formData.append("username", username);
        formData.append("password", password);
        //axios
        this.axios
          .post(path, formData)
          .then(response => {
            console.log(response)
            this.state = '*' + response.data.state
            if (response.data.state == "用户创建") {
              this.username = response.data.users[0].username
              this.userid = response.data.users[0].id

              path = api.api + "/user/record?id=" + this.userid
              this.axios.get(path).then(response => {
                console.log(response)
                // 编程式路由跳转 https://www.cnblogs.com/yangchin9/p/11005187.html
                this.$router.push({ path: '/' })
              })
    
            }
          })

      }
    }
  }
</script>